<template>
	<div id="orderManagePage">
		<!--<mu-tabs lineClass="activeLine" class="orderTab" :value="activeTab" @change="handleTabChange">
			<mu-tab titleClass="travelType" value="notTravel" title="未出行" />
			<mu-tab titleClass="travelType" value="haveTravel" title="已出行" />
		</mu-tabs>-->
		<!--加载动画-->
		<load v-if="load"></load>
		<!--订单为空组件-->
		<noOrder v-if="noOrder"></noOrder>
		<!--网络连接失败组件-->
		<netError v-if="netError" @close="netErrorClose"></netError>
		<div class="content">
			<div v-if="activeTab === 'notTravel'">
				<div class="order" v-for="order in list">
					<div class="orderTop" @click="toDetail(order)">
						<div>
							<div class="city">
								<span>{{order.fromCityCn}}</span>
								<span class="iconfont">&#xe6bd;</span>
								<span>{{order.toCityCn}}</span>
							</div>
							<div class="time">
								<span>{{order.list[0].deptDate|date}}</span>
								<span class="shike">{{order.list[0].deptTime}}至{{order.list[order.list.length-1].arrTime}}</span>
								<span>({{order.list[0].airlineNumber}})</span>
							</div>
							<div class="airport">
								<span>{{order.list[0].deptCity}}{{order.list[0].deptTerminal}}</span>
								<span> | </span>
								<span>{{destination(order).arrCity}}{{destination(order).arrTerminal}}</span>
							</div>
						</div>
						<div class="money">
							<div><b class="currencyType">￥</b> <b class="count">{{order.sum+order.insuranceLine}}</b></div>
							<div class="status">{{order.orderStatus|orderStatus}}</div>
							<div class="status">{{order.otherStatus|otherStatus}}</div>
						</div>
					</div>
					<div class="orderBottom">
						<div>
						 	<mu-raised-button @click="pay(order)" v-if="order.orderStatus==0||order.otherStatus=='waiting_for_process'" label="去支付" class="handle_btn"/>
						 	<mu-raised-button @click="cancel(order)" v-if="order.orderStatus==0" label="取消" class="handle_btn cancel_btn"/>
						</div>
					</div>
					<div class="failureBooking" v-if="order.orderStatus==10">
						<div><span class="iconfont">&#xe602;</span></div>
						<div>
							<p class="top">退款申请已提交，拉卡拉正在处理。</p>
							<p>(3个工作日之内资金将自动原路退回)</p>
						</div>
					</div>
				</div>
				<!--<p class="more">已展示全部，暂无更多出行！</p>-->
			</div>
			<div v-if="activeTab === 'haveTravel'">
				<div class="order" v-for="i in 10">
					<div class="orderTop">
						<div>
							<div class="city">
								<span>北京</span>
								<span class="iconfont">&#xe6bd;</span>
								<span>上海</span>
							</div>
							<div class="time">
								<span>4月22日</span>
								<span class="shike">17:35至20:55</span>
								<span>(ZH8923)</span>
							</div>
							<div class="airport">
								<span>首都机场T1</span>
								<span> | </span>
								<span>虹桥机场T2</span>
							</div>
						</div>
						<div class="money">
							<div><b class="currencyType">￥ </b> <b class="count">1082</b></div>
							<div class="status">待支付</div>
						</div>
					</div>
					<div class="orderBottom">
						 <div>
						 	<mu-raised-button label="退改签" class="handle_btn"/>
						 	<mu-raised-button label="附加服务" class="handle_btn"/>
						 </div>
					</div>
				</div>
				<!--<p class="more">已展示全部，暂无更多出行！</p>-->
			</div>
			<!--支付过程中的提示框-->
			<mu-dialog :open="paying" @close="paying = false">
				系统正在确认中，请稍后再试。				
			</mu-dialog>
			<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
				<p class="moreTip">{{loadingMsg}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>